<template>
  <Card>
    <div class="md:flex md:mb-5">
      <div class="text-3xl font-semibold" style="color: #4e598c">
        租户成熟度分析（按订阅时长）
      </div>
    </div>
    <div class="md:flex">
      <Form
          ref="formRef"
          :model="formState"
          class="md:flex-row w-full flex-wrap"
          v-bind="formItemLayout"
      >
        <div class="md:flex w-full md:justify-between">
          <div class="md:flex md:justify-start">
            <Col :span="24">
              <FormItem label="应用" name="stepType">
                <div class="md:w-30">
                  <Select
                      v-model:value="appId"
                      :allowClear="true"
                      :options="appOptions"
                      placeholder="请选择应用"
                  >
                  </Select>
                </div>
              </FormItem>
            </Col>
          </div>
          <Col :span="4">
            <FormItem>
              <div class="md:flex md:justify-end">
                <Button shape="circle" type="primary" @click="onSubmit">
                  <template #icon>
                    <SearchOutlined/>
                  </template>
                </Button>
                <Button shape="circle" style="margin-left: 5px" @click="resetForm">
                  <template #icon>
                    <RedoOutlined/>
                  </template>
                </Button>
              </div>
            </FormItem>
          </Col>
        </div>
      </Form>
    </div>
    <div class="md:flex">
      <div :id="maturityPieChartName" style="width: 300%; height: 300%"></div>
    </div>
  </Card>
</template>

<script lang="ts" setup>
import {Button, Card, Col, Form, FormItem, Select} from 'ant-design-vue';
import {RedoOutlined, SearchOutlined} from '@ant-design/icons-vue';
import {onMounted, reactive, ref} from 'vue';
import * as echarts from 'echarts';
import {getAppSelectList} from '/@/api/operation-center/common/common';
import {AppTemplateResp} from '/@/api/operation-center/common/model/commonModel';
import {
  getMaturityTenantNumByApp
} from '/@/api/operation-center/app-operation/subscription-analysis/subscriptionAnalysis';


const maturityPieChartName = 'maturity-pie-chart';

var maturityOption;

let tenantNumByMaturityList: any[] = [];

const formState = reactive<Record<string, any>>({});
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 24},
};

// Select 组件属性设置
const appId = ref();
const appOptions = ref<any[]>([]);

let maturityCategories = [
  '成长阶段（1~3个月）',
  '成熟阶段（4~9个月）',
  '续约阶段（10~12个月）',
  '稳定阶段（1年以上）',
];

function convertToTenantNumByMaturityList(res: number[]) {
  for (let i = 0; i < res.length; i++) {
    tenantNumByMaturityList.push({
      name: maturityCategories[i],
      value: res[i],
    });
  }
}

function initPieChart(pieChartName: string, pieChartData: any[], option: any) {
  let pieDom = document.getElementById(pieChartName);
  let myChart = echarts.init(pieDom);

  option = {
    title: {
      text: '租户成熟度分布',
      left: 'center',
    },
    series: [
      {
        type: 'pie',
        data: pieChartData,
        // radius: ['40%', '70%'],
      },
    ],
  };

  option && myChart.setOption(option);
}

const onSubmit = async () => {
  maturityOption = [];
  tenantNumByMaturityList = [];

  let param = {appId: appId.value};

  getMaturityTenantNumByApp(param).then((res) => {
    convertToTenantNumByMaturityList(res);
    initPieChart(maturityPieChartName, tenantNumByMaturityList, maturityOption);
  });
};

function convertAppOptions(res: AppTemplateResp[]) {
  let options: any[] = [];
  for (let i = 0; i < res.length; i++) {
    let appItem = res[i];
    let appOption = {
      label: appItem.name,
      value: appItem.id,
    };
    options.push(appOption);
  }
  appOptions.value = options;
}

// 清空表单参数
const resetForm = () => {
  appOptions.value = [];
};

onMounted(() => {
  getAppSelectList().then((res) => {
    convertAppOptions(res);
  });
});


</script>
